<template>
  <div class="growthPlan">
    <div class="header">
      <div class="title">一&nbsp·&nbsp<span>让兼职成为一种职业</span>&nbsp·&nbsp一</div>
      <div class="photo">
        <img src="@/assets/logo.png" alt="">
      </div>
      <div class="name">社员</div>
      <div class="tip">当前身份</div>
    </div>
    <div class="div1">
      <div>
        <span>3</span>
        <span>累计邀请关注人数</span>
      </div>
      <div class="line"></div>
      <div>
        <span>97</span>
        <span>距离成为生产队还差人数</span>
      </div>
    </div>
  </div>
</template>

<script>
    /**
     *
     * @Author zzl
     * @Date 2019/5/17 16:21.
     */

    export default {
        mounted() {

        },
        components: {},
        props: {},
        data() {
            return {}
        },
        computed: {},
        methods: {},
        watch: {},
        filters: {},
        beforeDestroy() {

        }
    }
</script>

<style lang="less" scoped>
 .growthPlan{
   width: 100%;
   height: 100%;
   .header{
     width: 100%;
     height: 3.9rem;
     background: url("../../../../assets/images/Growthplan.png") no-repeat;
     background-size:100% 100% ;
     position: relative;

     .title{
       width: 7rem;
       color: #E3C68D;
       position: absolute;
       top: 0.54rem;
       left: 50%;
       margin-left: -3.5rem;
       text-align: center;
       font-size: 0.26rem;
       span{
         letter-spacing:8px;
       }
     }
     .photo{
       width: 0.92rem;
       height: 0.92rem;
       border: 2px solid #fff;
       position: absolute;
       border-radius: 50%;
       top: 1.16rem;
       left: 50%;
       margin-left: -0.46rem;
       z-index: 99;
       overflow: hidden;
       img{
         width: 100%;
         height: 100%;
       }
     }
     .name{
       position: absolute;
       width: 6rem;
       text-align: center;
       top: 2.38rem;
       left: 50%;
       margin-left: -3rem;
       font-size: 0.36rem;
       color: #FDC12C;
     }
     .tip{
       position: absolute;
       width: 6rem;
       text-align: center;
       top: 2.9rem;
       left: 50%;
       margin-left: -3rem;
       font-size: 0.24rem;
       color: #FFFFFF;
     }
   }
   .div1{
     width: 100%;
     height: 1.56rem;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     background:rgba(234,234,234,1);
     .line{
       width: 1px;
       height: 0.77rem;
     }
   }
 }
</style>
